<template>
  <!--  <view class="show"> 
    <button>出来</button>
  </view> -->

  <view>
    <button @click="open">打开弹窗</button>
    <uni-popup ref="popup" type="bottom">

      <!-- 整个弹窗 -->
      <view class="sizes">
        <!-- 遮罩 -->
        <view class="sizes-mask show"></view>
        <!-- 主体 -->
        <view class="sizes-pop none">
          <!-- 关闭 -->
          <view class="sizes-pop-close"></view>

          <!-- 弹窗头部 -->
          <view class="sizes-pop-head">
            <!-- 图片 -->
            <view class="sizes-pop-head-img">
              <image mode="widthFix" src="../../static/c1.png"></image>
            </view>

            <!-- 图片右侧的信息 -->
            <view class="sizes-pop-head-text">
              <view class="sizes-pop-head-text-name">物品名字</view>
              <view class="sizes-pop-head-text-price"><label>￥</label><text>{{price}}</text></view>
              <view class="sizes-pop-head-text-left">剩余{{stock}}份</view>
            </view>
          </view>

          <!-- 主要的规格选择 -->
          <scroll-view scroll-y class="sizes-pop-main">
            <!-- 先循环出所有规格 -->
            <view class="sizes-pop-main-list" v-for="(item,i1) in sizes" :key="i1">
              <view class="sizes-pop-main-list-name">{{item.name}}</view>
              <!-- 第二层循环 -->
              <view class="sizes-pop-main-list-item">
                <text :class="item.start === i2?'selected':''" v-for="(item2,i2) in item.children" :key="i2"
                  @click="change(i1,i2)">{{item2.title}}</text>
              </view>
            </view>

          </scroll-view>

          <!-- 数量 -->
          <view class="sizes-pop-number">
            <view class="sizes-pop-number-text">数量</view>
            <view class="number">
              <uni-number-box :min="1" :value="1" @change="numChangeHandler"></uni-number-box>
            </view>
          </view>

          <!-- 放入购物车 -->
          <view class="sizes-pop-bottom" v-if="true">
            <label @click="addToCart">加入购物车</label>
          </view>

          <!-- 立即购买 -->
          <view class="sizes-pop-bottom" v-else>
            <label @click="buy">立即购买</label>
          </view>

        </view>


      </view>

    </uni-popup>



  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 货物价格
        price: 0,

        // 货物剩余数量
        stock: 0,

        // 用户在numberbox中选择的数量
        count: 0,

        // 选定的规格,存的是键值对
        userChooseSize: {},

        // 多规格商品的规格
        sizes: [{
            sizes_id: 0,
            name: '规格',
            // start是选中的内容
            start: 0,
            children: [{
                children_id: 102,
                title: '小份'
              },
              {
                children_id: 103,
                title: '中份'
              }
            ]
          },
          {
            sizes_id: 1,
            name: '口味',
            // start是选中的内容
            start: 0,
            children: [{
                children_id: 102,
                title: '甜味'
              },
              {
                children_id: 103,
                title: '烧烤味'
              }
            ]
          },
        ],

        // 商品的规格细节
        sizes_detail: [{
            'id': '1',
            'price': '10',
            'stock': '10',
            'productSpecs': {
              '规格': '小份',
              '口味': '甜味'
            }
          },
          {
            'id': '2',
            'price': '20',
            'stock': '20',
            'productSpecs': {
              '规格': '小份',
              '口味': '烧烤味'
            }
          },
          {
            'id': '3',
            'price': '30',
            'stock': '30',
            'productSpecs': {
              '规格': '中份',
              '口味': '甜味'
            }
          },
          {
            'id': '4',
            'price': '40',
            'stock': '40',
            'productSpecs': {
              '规格': '中份',
              '口味': '烧烤味'
            }
          }
        ]
      };
    },

    methods: {
      open() {
        this.$refs.popup.open()
      },

      change(i1, i2) {
        // 改变选定规格样式
        this.sizes[i1].start = i2

        // 将选中的选项存起来放入userChooseSize键值对中
        this.saveToUserChooseSize(i1, i2)

      },

      // 用户选择的物品数量改变
      numChangeHandler(val) {
        this.count = val

      },

      //将选中的选项存起来放入userChooseSize键值对中
      saveToUserChooseSize(i1, i2) {
        this.userChooseSize[this.sizes[i1].name] = this.sizes[i1].children[i2].title

        // console.log(this.userChooseSize)

        // 将键值对与传过来的进行比较
        this.sizes_detail.forEach(item => {
          if (this.isObjectValueEqualNew(this.userChooseSize, item.productSpecs)) {
            // 设置金额和数量
            this.price = item.price
            this.stock = item.stock

          }
        })
      },

      // 判断键值对是否相等的函数
      isObjectValueEqualNew(a, b) {
        // 判断对象是否指向同一内存
        if (a === b) return true;

        // 获取对象键值数组
        let aProps = Object.getOwnPropertyNames(a);
        let bProps = Object.getOwnPropertyNames(b);

        // 判断键值数组长度是否一致
        if (aProps.length !== bProps.length) return false;

        // 遍历键值
        for (let prop in a) {
          // 判断a的键是否在b中存在
          if (b.hasOwnProperty(prop)) {
            // 存在则判断a的键值是否为对象
            if (typeof a[prop] === 'object') {
              // 是对象则判断是否相等
              // 如果不相等
              if (!isObjectValueEqual(a[prop], b[prop])) return false;
            } else if (a[prop] !== b[prop]) {
              return false;
            }
          }
          // a的键在b中不存在
          else {
            return false;
          }
        }

        return true;
      },


      // 加入购物车
      addToCart() {
        // console.log(this.checked)
        // console.log(this.count)
      },

      // 立即购买
      buy() {

      }
    },

    onLoad() {


      // 判别是添加进购物车还是立即购买
    }
  }
</script>

<style lang="scss">
  .sizes {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 999;

    .sizes-mask {
      width: 100%;
      height: auto;
      position: fixed;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: 0px auto;
      background: rgba(0, 0, 0, 0.4);
      z-index: 1000;
    }

    .sizes-pop {
      width: 100%;
      height: auto;
      position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: 1001;
      background: #fff;
      border-radius: 5px 5px 0px 0px;

      .sizes-pop-close {}

      .sizes-pop-head {
        width: 94%;
        height: auto;
        margin: 0px auto;
        border-bottom: 1px #eee solid;
        display: flex;
        flex-direction: row;
        padding: 20rpx 0px;

        .sizes-pop-head-img {
          width: 25%;

          image {
            width: 100%;
            height: 200rpx;
            border: 1px #eee solid;
            display: block;
          }
        }


        .sizes-pop-head-text {
          width: 75%;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding-left: 3%;
          justify-content: space-around;

          .sizes-pop-head-text-name {
            font-size: 16px;
            font-weight: bold;
            width: 90%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #444;
          }

          .sizes-pop-head-text-price {
            display: flex;
            flex-direction: row;
            color: #eaa02c;
            display: table-cell;

            vertical-align:bottom label {
              font-size: 12px;
              font-weight: bold;
              margin-right: 2%;
            }

            text {
              font-size: 18px;
            }
          }

          .sizes-pop-head-text-left {
            font-size: 13px;
            color: #888;
            margin-right: 3%;
          }
        }
      }

      .sizes-pop-main {
        width: 100%;
        max-height: 600rpx;
        padding-top: 10px;

        .sizes-pop-main-list {
          width: 100%;
          height: auto;
          box-sizing: border-box;
          padding: 0px 3%;
        }

        .sizes-pop-main-list-name {
          width: 100%;
          height: auto;
          font-size: 15px;
          color: #333;
          margin-bottom: 15px;
        }

        .sizes-pop-main-list-item {
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          text {
            color: #fe7b2e;
            margin: 0px 0%;
            border-radius: 4px;
            text-align: center;
            box-sizing: border-box;
            min-width: 30%;
            border: 1px #fe7b2e solid;
            margin-bottom: 15px;
            font-size: 14px;
            line-height: 33px;
            padding: 0px 2%;
            margin-right: 3%;
          }
        }
      }

      .sizes-pop-number {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 40rpx 5%;
        display: flex;
        justify-content: space-between;
      }

      .sizes-pop-bottom {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 3%;
        box-sizing: border-box;
        border-top: 1px #eee solid;

        label {
          text-align: center;
          color: #fff;
          height: 100rpx;
          line-height: 100rpx;
          /* background-image:linear-gradient(#ff4f19,#E33E33); */
          background: #E31D1A;
          border-radius: 40px;
          letter-spacing: 3px;
        }
      }
    }
  }

  .selected {
    background: #ff8d00;
    color: #fff !important;
  }


  // .none{ bottom: -100%;}  
  // .sizes-pop .none { bottom: -100%; transition: all 0.5s;}
  // .sizes-mask .none { display: none; transition: all 0.5s;}


  // .show{ bottom: 0px;}
  // .sizes-pop .show { bottom: 0%; transition: all 0.5s;}
  // .sizes-mask .show { display: block; transition: all 0.5s;}
</style>
